<template>
  <el-dialog
    :title="$t('contract.approveDialog.title')"
    :visible.sync="visible"
    width="600px"
    class="approve-dialog"
  >
    <el-form
      ref="form"
      :model="formInline"
      
      label-position="top"
    >
      <el-form-item :label="$t('contract.approveDialog.form.no')">
        {{ approveData.objNo }}
      </el-form-item>
      <el-form-item :label="$t('contract.approveDialog.form.source')"> {{$t('contract.setting.moduleName')}} </el-form-item>
      <el-form-item :label="$t('contract.approveDialog.form.type')">
        {{ approveData.typeName }}
      </el-form-item>
      <el-form-item :label="$t('contract.approveDialog.form.action')">
        {{ approveData.action }}
      </el-form-item>
      <el-form-item :label="$t('contract.approveDialog.form.content')">
        {{ approveData.action }} {{ approveData.objNo }}
      </el-form-item>
      <el-form-item :label="$t('contract.approveDialog.form.proposerName')">
        {{ approveData.proposerName }}
      </el-form-item>
      <el-form-item :label="$t('contract.approveDialog.form.createTime')">
        {{ approveData.createTime | fmt_datetime}}
      </el-form-item>
      <el-form-item :label="$t('contract.approveDialog.form.applyRemark')">
        {{ approveData.applyRemark }}
      </el-form-item>
      <el-form-item :label="$t('contract.approveDialog.form.state')">
        <el-radio-group v-model="formInline.state">
          <el-radio :label="1">{{$t('contract.approveDialog.form.stateValue[0]')}}</el-radio>
          <el-radio :label="0">{{$t('contract.approveDialog.form.stateValue[1]')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="$t('contract.approveDialog.form.approveRemark')">
        <el-input
          type="textarea"
          v-model="formInline.approveRemark"
          resize="none"
          rows="3"
          :maxlength="500"
        ></el-input>
      </el-form-item>
    </el-form>

    <p class="tip">{{$t('contract.approveDialog.form.tip')}}</p>

    <div slot="footer">
      <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="onSubmit" :loading="approveLoading"
        >{{$t('common.base.confirm')}}</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { reactive, toRefs } from 'vue';
import { Message } from 'element-ui';
import i18n from '@src/locales'

export default {
  name: 'approve-dialog',
  props: {
    approveData: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { emit }) {
    const data = reactive({
      visible: false,
      formInline: {
        state: 1,
        approveRemark: '',
      },
      approveLoading: false,
    });

    const onSubmit = () => {
      if (data.formInline.state === 0 && !data.formInline.approveRemark) {
        return Message({
          message: i18n.t('contract.approveDialog.submitTip'),
          type: 'warning',
        });
      }

      data.approveLoading = true;
    };
    return {
      ...toRefs(data),
      onSubmit,
    };
  },
};
</script>

<style lang="scss" scoped>
.approve-dialog {
  .tip {
    margin: 10px 0 0;
    line-height: 26px;
    font-size: 12px;
    color: #999;
  }
  ::v-deep .el-dialog__body {
    padding-top: 10px;
  }
  ::v-deep .el-dialog__headerbtn {
    top: 0;
  }
  ::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 0px !important;
  }
}
</style>